<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="Responsive Admin Dashboard Template">
		<meta name="keywords" content="admin,dashboard">
		<meta name="author" content="skcats">
		<!-- The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags -->

		<!-- Title -->
		<title>我的信息</title>

		<!-- Styles -->
		<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link href="assets/plugins/icomoon/style.css" rel="stylesheet">
		<link href="assets/plugins/uniform/css/default.css" rel="stylesheet" />
		<link href="assets/plugins/switchery/switchery.min.css" rel="stylesheet" />
		<link href="css/bootstrap-table.min.css" rel="stylesheet" />
		<link href="assets/plugins/plupload/js/jquery.plupload.queue/css/jquery.plupload.queue.css" rel="stylesheet" type="text/css" />

		<!-- Theme Styles -->
		<link href="assets/css/ecaps.min.css" rel="stylesheet">
		<link href="assets/css/custom.css" rel="stylesheet">
	</head>
	<body>
		<!-- Page Inner -->
		<div class="page-inner" style="">
			<!-- <div class="page-title">
				<h3 class="breadcrumb-header">公司信息</h3>
			</div> -->
			<!-- 
			<div class="alert alert-default" role="alert">
			    Simple, clean and engaging charts for designers and developers.
			</div> -->
			<div id="main-wrapper">
				<div class="modal fade" id="modifyModal" tabindex="-1" role="dialog" aria-labelledby="modifyModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close btn-cancel" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
								<h4 class="modal-title" id="modifyModalLabel">品牌信息</h4>
							</div>
							<div class="modal-body">
								<form action="" role="form" id="modify-row-form">
									<div class="form-group">
										<div class="panel panel-white">
											<span class="text-danger">(建议图片大小160*80的jpg/png格式)</span>
											<div class="panel-heading clearfix">
												<h3 class="panel-title">品牌图片&nbsp;Brand Logo</h3>
											</div>
											<div class="panel-body">
												<div id="uploader">
													<p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
												</div>
											</div>
										</div>
									</div>
									<div class="form-group">
										<input type="text" name="brand-name" id="brand-name" class="form-control" placeholder="请填写品牌名称" required>
									</div>
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">取消</button>
								<button type="submit" id="modify-row" class="btn btn-primary">修改</button>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<div class="panel panel-white">
							<div class="panel-heading">
								<h3>公司信息</h3>
							</div>
							<div class="panel-body">
								<div class="table-responsive">
									<table id="example" class="display table" style="width: 100%; cellspacing: 0;" data-show-jumpto="true">
										<thead>
											<tr>
												<th>Company Name公司名称(中文)</th>
												<th>Company Name公司名称(英文)</th>
												<th>GMC Report Type品牌商认证类型</th>
												<th>GMC Report Url证书地址</th>
												<th>管理</th>
											</tr>
										</thead>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="clearfix"></div>
				<div class="row">
					<div class="col-md-12">
						<div class="panel panel-white">
							<div class="panel-heading">
								<h3>品牌信息</h3>
							</div>
							<div class="panel-body">
								<div class="table-responsive">
									<table id="example1" class="display table" style="width: 100%; cellspacing: 0;">
										<thead>
											<tr>
												<th></th>
												<th>品牌名称Brand Name</th>
												<th>品牌图片Brand Logo</th>
												<th>管理</th>
											</tr>
										</thead>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div><!-- Main Wrapper -->
			<div class="page-footer">
				<div class="btn-group">
					<button type="button" class="btn btn-success m-b-sm" data-toggle="modal" data-target="#modifyModal">
						<i class='fa fa-crosshairs'></i>添加
					</button>
				</div>
			</div>
		</div><!-- /Page Inner -->
		<!-- Javascripts -->
		<script src="assets/plugins/jquery/jquery-3.1.0.min.js"></script>
		<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
		<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
		<script src="assets/plugins/uniform/js/jquery.uniform.standalone.js"></script>
		<script src="assets/plugins/plupload/js/plupload.full.min.js"></script>
		<script src="assets/plugins/plupload/js/jquery.plupload.queue/jquery.plupload.queue.min.js"></script>
		<script src="js/bootstrap-table.min.js"></script>
		<script src="js/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="assets/plugins/switchery/switchery.min.js"></script>
		<script src="assets/js/ecaps.min.js"></script>
		<script src="assets/js/pages/form-file-upload.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function GetRequest() {
				var url = location.search; //获取url中"?"符后的字串  
				var theRequest = new Object();
				if (url.indexOf("?") != -1) {
					var str = url.substr(1);
					strs = str.split("&");
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
					}
				}
				return theRequest;
			}
			var request = GetRequest();
			console.log(GetRequest());

			function Company(c_name, name, type, url) {
				this.c_name = c_name;
				this.name = name;
				this.type = type;
				this.url = url;
			}

			function Brand(name, logoPath) {
				this.name = name;
				this.logoPath = logoPath;
			}
			var row = [new Company(request['c_name'], request['name'], request['type'], request['url'])];
			var rows = [
				new Brand('brand1', 'img/avatar1.jpg'),
				new Brand('brand2', 'img/avatar1.jpg'),
				new Brand('brand3', 'img/avatar1.jpg'),
				new Brand('brand4', 'img/avatar1.jpg'),
				new Brand('brand5', 'img/avatar1.jpg'),
			]
			var $table = $('#example');
			var $table1 = $('#example1');
			$(window).resize(function() {
				$table.bootstrapTable('resetView');
				$table1.bootstrapTable('resetView');
			});
			$(function() {
				'use strict';
				$table.bootstrapTable({
					method: 'post',
					data: row,
					//	url:"../BookServlet",
					cache: false,
					contentType: 'application/x-www-form-urlencoded',
					striped: true,
					dataType: "json",
					dataField: "data",
					pagination: true,
					showPaginationSwitch: false,
					pageSize: 10,
					pageNumber: 1,
					sortable: true,
					sortOrder: "asc",
					pageList: [2, 5, 10],
					search: false,
					sidePagination: 'client',
					silent: true,
					toolbarAlign: 'right',
					columns: [{
							field: 'c_name',
							align: 'center',
							valign: 'center',
						}, {
							field: 'name',
							align: 'center',
						}, {
							field: 'type',
							align: 'center',
						}, {
							field: 'url',
							align: 'center',
						}, {
							field: 'op',
							align: 'center',
							valign: 'center',
							events: window.operateEvents,
							formatter: function(value, row, index) {
								var html = [
									"<button type='button' class='btn btn-primary btn-xs' onclick='goEdit()'><i class='fa fa-pencil'></i>修改</button>",
								];
								return html.join('');
							}
						},

					],
					onLoadSuccess: function(res) {

					},
					onLoadError: function(statusCode) {
						return "error"
					},
					formatLoadingMessage: function() {
						return "";
					},
					formatNoMatches: function() {
						return "";
					}
				});

				$table1.bootstrapTable({
					method: 'post',
					data: rows,
					//	url:"../BookServlet",
					cache: false,
					contentType: 'application/x-www-form-urlencoded',
					striped: true,
					dataType: "json",
					dataField: "data",
					pagination: true,
					showPaginationSwitch: false,
					pageSize: 10,
					pageNumber: 1,
					sortable: true,
					sortOrder: "asc",
					pageList: [2, 5, 10],
					search: false,
					sidePagination: 'client',
					silent: true,
					toolbarAlign: 'right',
					columns: [{
						field: null,
						align: 'center',
						valign: 'center',
						checkbox: true,
					}, {
						field: 'name',
						align: 'center',
						valign: 'center',
					}, {
						field: 'logoPath',
						align: 'center',
						formatter: function(value, row, index) {
							var html = [
								'<img src=' + value + ' class="img-thumbnail" style="width:20%;height:20%"></img>'
							];
							return html.join('');
						}
					}, {
						field: 'op',
						align: 'center',
						valign: 'center',
						events: window.operateEvents,
						formatter: function(value, row, index) {
							var html = [
								"<button type='button' style='margin-right: 5px;' class='op down btn btn-primary btn-xs btnEdit' data-toggle='modal' data-target='#modifyModal'><i class='fa fa-pencil'></i>修改</button>",
								"<button type='button' class='op delete btn btn-danger btn-xs btnDel'><i class='fa fa-trash-o'></i>删除</button>"
							];
							return html.join('');
						}
					}, ],
					onLoadSuccess: function(res) {

					},
					onLoadError: function(statusCode) {
						return "error"
					},
					formatLoadingMessage: function() {
						return "";
					},
					formatNoMatches: function() {
						return "";
					}
				});
				$('.modal').on('hide.bs.modal', function() {
					//jq选择器得到的都是数组
					$('#modify-row-form')[0].reset();
					$("#uploader").pluploadQueue().refresh();
					$("#uploader").pluploadQueue().start(); 
				})
			});

			function goEdit() {
				window.location.href = 'brand-addbrand.html';
			}
		</script>
	</body>
</html>
